<template>
  <div class="h-full">
    <PageHeader :title="t('apply.settled_protocol.入驻协议')" />
    <div class="card overflow-y-auto" style="max-height: calc(100% - 200px)">
      <div class="content" v-html="article['content' + locale]"></div>
    </div>
    <div class="mt20 ml20">
      <el-checkbox v-model="agree">{{
        t("apply.settled_protocol.我已阅读并同意以上协议")
      }}</el-checkbox>
    </div>
    <div class="flex_aic_jcc mt32">
      <el-button
        type="primary"
        size="large"
        @click="handleNext"
        :disabled="!agree"
        >{{ t("apply.settled_protocol.下一步") }}</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import Api from "@/config/api/api";

const { t, locale } = useI18n();
const agree = ref(false);
const router = useRouter();
const article = ref({});

const handleNext = () => {
  router.push("/apply/base_info");
};
const getArticle = () => {
  Api.articleDetail('sjrzxy').then((res) => {
    article.value = res.data || {};
  });
};

onMounted(() => {
  getArticle();
});
</script>

<style scoped lang="scss">
.card {
  min-height: 341px;
  margin: 0 20px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #fff;
}
</style>
